<template>
  <div class="jlf-detail">
    <div class="jlf-detail__title" v-if="title">
      <!-- 标题 -->
      <h3>{{ title }}</h3>
      <!-- 状态 -->
      <div v-if="status" class="jlf-detail__status">{{ status }}</div>
      <!-- 展开or收起 -->
      <div class="jlf-detail__control" v-if="control" @click="controlClick">
        <div
          class="jlf-detail__control--triangle"
          :class="
            isFold
              ? 'jlf-detail__control--triangle-down'
              : 'jlf-detail__control--triangle-up'
          "
        ></div>
        <p class="jlf-detail__control--text">{{ isFold ? "收起" : "展开" }}</p>
      </div>
    </div>

    <!-- 信息列表 -->
    <div
      class="jlf-detail__content"
      v-if="type === 'info'"
      :style="isHasheight ? { height: originHeight + 'px' } : {}"
    >
      <div
        class="jlf-detail__area"
        ref="detailArea"
        v-for="(val, key, i) in data"
        :key="i"
      >
        <div class="jlf-detail__area--left">
          <p>{{ key }}</p>
        </div>
        <div class="jlf-detail__area--right">
          <p>{{ val ? val : "" }}</p>
        </div>
      </div>
    </div>

    <div class="jlf-detail__content" v-show="isPickup && type !== 'info'">
      <!-- 流程 -->
      <div class="jlf-detail__content-process" v-if="type === 'process'">
        <Timelime pending :items="data" />
      </div>

      <!-- 百度地图 -->
      <div class="jlf-detail__content-map" v-else-if="type === 'map'">
        <div class="jlf-detail__content-map--address">
          位置：{{ address || geoLocaltionAddress }}
        </div>
        <baidu-map
          class="map"
          :center="center"
          :zoom="zoom"
          @ready="handler"
          :style="mapHeight ? { height: mapHeight + 'px' } : {}"
          :scroll-wheel-zoom="true"
        >
        </baidu-map>
      </div>

      <!-- 图片列表 -->
      <div class="jlf-detail__content-images" v-else-if="type === 'image'">
        <ul v-if="data.length > 0" class="jlf-detail__content-images--content">
          <li
            v-for="(item, index) in data"
            :key="index"
            class="jlf-detail__content-images--content--item"
            :style="customStyle"
          >
            <img :src="item.src" alt="" @click="handleImgClick(item, index)" />
          </li>
        </ul>
        <ul class="jlf-detail__content-images--content" v-else>
          <li class="jlf-detail__content-images--content--item">
            <img src="https://s3.bmp.ovh/imgs/2021/10/10106173b0d84f59.png" />
          </li>
        </ul>
      </div>

      <!-- 处理反馈 -->
      <div class="jlf-detail__content-feedback" v-else-if="type === 'feedback'">
        <div class="jlf-detail__content-feedback--title">
          <span v-if="subTitle">{{ subTitle }}</span>
          <span>{{ textVal }}/{{ maxlength }}</span>
        </div>

        <textarea
          v-model="textareaValue"
          :style="customStyle"
          :placeholder="placeholderText"
          @change="onChange"
          @input="onInput"
          :maxlength="maxlength"
        ></textarea>

        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
// import Vue from "vue";
// import BaiduMap from "vue-baidu-map";

import Timelime from "../timeline";

// Vue.use(BaiduMap, {
//   //* ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
//   // 应用ak 默认为个人开发者，如果后续地图不能使用，请更换 百度ak
//   ak: "RFdzFyzxfQ3MbOH5EB2nmGwT83lsGIMo",
// });

export default {
  name: "MDetail",
  components: { Timelime },
  props: {
    title: String,
    subTitle: String,
    status: String,
    type: {
      type: String,
      default: "info",
    },
    address: {
      type: String,
      default: "",
    },
    placeholderText: {
      type: String,
      default: "请用文字描述事发位置或问题",
    },
    control: {
      type: Boolean,
      default: false,
    },
    column: {
      type: Number,
      default: 2,
    },
    zoom: {
      type: Number,
      default: 16,
    },
    mapHeight: {
      type: Number,
      default: 300,
    },
    maxlength: {
      type: Number,
      default: 300,
    },
    customStyle: {
      type: [Object, String],
      default: () => "",
    },
    data: {
      type: [Object, Array],
      default: () => {
        return {} || [];
      },
    },
    center: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isPickup: true /* 默认收起状态 */,
      isHasheight: true,
      originHeight: 0 /* 一行的高度*/,
      columnheight: 0 /* 新值高度 */,
      geoLocaltionAddress: "",
      textareaValue: "",
      textVal: 0,
    };
  },
  watch: {
    column: {
      immediate: true,
      handler(columnNumber) {
        this.$nextTick(() => {
          let tempArr = [];
          if (this.$refs.detailArea) {
            Array.from(this.$refs.detailArea).forEach((el) => {
              tempArr.push(el.offsetHeight);
            });

            if (parseInt(columnNumber) == 2) {
              this.originHeight = this.columnheight = tempArr[0] + tempArr[1];
            } else {
              this.originHeight = this.columnheight = tempArr
                .splice(0, columnNumber)
                .reduce((prev, curr) => {
                  return prev + curr;
                });
            }
          }
        });
      },
      deep: true,
    },
  },
  methods: {
    controlClick() {
      this.isPickup = !this.isPickup;
      if (!this.isPickup) {
        this.isHasheight = false;
      } else {
        this.isHasheight = true;
        if (this.columnheight) {
          this.originHeight = this.columnheight;
        } else {
          this.originHeight = this.columnheight;
        }
      }
    },
    handler({ BMap, map }) {
      const that = this;
      if (this.center) {
        // WGS84 为初始坐标
        const point = new BMap.Point(this.center.lng, this.center.lat);
        map.centerAndZoom(point, this.zoom ? this.zoom : 16);
        // const marker = new BMap.Marker(point)
        // map.addOverlay(marker)

        /* 转换坐标为 BD09 在GCJ02坐标系基础上再次加密*/
        const convertor = new BMap.Convertor();
        const pointArr = [];
        pointArr.push(point);

        convertor.translate(pointArr, 1, 5, (data) => {
          if (data.status === 0) {
            map.centerAndZoom(data.points[0], this.zoom ? this.zoom : 16);
            const marker = new BMap.Marker(data.points[0]);
            map.addOverlay(marker);
          } else {
            throw new Error("Failed to convert coordinates");
          }
        });
      } else {
        /* 没有得到lng lat时， 自动获取定位 */
        const geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function (r) {
          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
            const mk = new BMap.Marker(r.point);
            map.centerAndZoom(r.point, this.zoom ? this.zoom : 16);
            map.addOverlay(mk);
            // 更新页面
            that.$nextTick(() => {
              that.geoLocaltionAddress =
                r.address.city + r.address.province + r.address.district;
            });
          } else {
            console.warn("failed " + this.getStatus());
          }
        });
      }
    },
    handleImgClick(imgSrc) {
      this.$emit("onImageClick", imgSrc);
    },
    onChange(e) {
      this.$emit("onChange", e, this.textareaValue);
    },
    onInput(e) {
      this.textVal = this.textareaValue.length;
      this.$emit("onInput", this.textareaValue);
    },
  },
  computed: {
    isFold() {
      return (
        (this.type === "info" && this.isPickup) ||
        (this.isPickup && this.type !== "info")
      );
    },
  },
  mounted() {},
};
</script>